<template>
  <div class="my">
    <tm-app>
      <!-- 自定义导航 -->
      <view class="nav">
        <tm-navbar title="" linear="right" :hideHome="true" :transprent="true"></tm-navbar>
      </view>
      <view class="bgc-board">
        <!-- 用户信息 -->
        <tm-sheet :transprent="true" :margin="[0, 0]" :padding="[0, 0]" linear="right">
          <tm-sheet :margin="[50, 0]" :transprent="true" _class="flex flex-row flex-row-center-start">
            <tm-image
              preview
              :width="100"
              :height="100"
              :round="25"
              src="https://img2.baidu.com/it/u=3832109983,3223084707&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
            ></tm-image>
            <tm-text :font-size="32" class="text-weight-b ml-20">Hi User1</tm-text>
          </tm-sheet>
        </tm-sheet>
        <!-- 用户的数据 -->
        <tm-sheet :margin="[0, 0]" :padding="[0, 0]" :transprent="true">
          <tm-grid :width="750" :col="3" :transprent="true">
            <tm-grid-item>
              <tm-text>{{ redPacket }}元</tm-text>
              <tm-text label="资产"></tm-text>
            </tm-grid-item>
            <tm-grid-item>
              <tm-text>{{ redPacket.toFixed(2) }}元</tm-text>
              <tm-text label="红包"></tm-text>
            </tm-grid-item>
            <tm-grid-item>
              <tm-text>{{ redPacket }}元</tm-text>
              <tm-text label="优惠券"></tm-text>
            </tm-grid-item>
          </tm-grid>
        </tm-sheet>
      </view>
      <!-- 我的订单 -->
      <tm-sheet :margin="[0]" :padding="[0]" class="my-order">
        <tm-sheet _class="flex flex-row flex-between flex-row-center-between border-radius-t-200">
          <tm-text :fontSize="32">我的订单</tm-text>
          <tm-text color="grey" @click="gotoOrderList(-1)">查看全部</tm-text>
        </tm-sheet>
        <tm-grid :width="710" :col="5" _class="border-radius-t-200">
          <tm-grid-item @click="gotoOrderList(0)">
            <span class="iconfont icon-daifukuan order"></span>
            <tm-text label="待付款"></tm-text>
          </tm-grid-item>
          <tm-grid-item @click="gotoOrderList(1)">
            <tm-text class="iconfont icon-daifahuo order"></tm-text>
            <tm-text label="待发货"></tm-text>
          </tm-grid-item>
          <tm-grid-item @click="gotoOrderList(2)">
            <tm-text class="iconfont icon-daitihuo order"></tm-text>
            <tm-text label="待提货"></tm-text>
          </tm-grid-item>
          <tm-grid-item @click="gotoOrderList(3)">
            <tm-text class="iconfont icon-daipingjia order"></tm-text>
            <tm-text label="待评价"></tm-text>
          </tm-grid-item>
          <tm-grid-item @click="gotoOrderList(4)">
            <tm-text class="iconfont icon-yiwanjie order"></tm-text>
            <tm-text label="已完结"></tm-text>
          </tm-grid-item>
        </tm-grid>
      </tm-sheet>

      <!-- 添加活动 -->
      <tm-sheet :margin="[0]" :padding="[0]" class="my-active">
        <tm-grid :width="750" :col="4">
          <tm-grid-item>
            <span class="iconfont icon-youjiangtuijian active"></span>
            <tm-text label="有奖推荐" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-yaoqingxinren active"></span>
            <tm-text label="邀新用户有奖" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-guopin active"></span>
            <tm-text label="7天种水果" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-dijia active"></span>
            <tm-text label="天天低价" :fontSize="24"></tm-text>
          </tm-grid-item>
        </tm-grid>
      </tm-sheet>
      <!-- 添加轮播图 -->
      <tm-sheet :margin="[0]" class="carousel">
        <tm-carousel
          autoplay
          :margin="[0, 16]"
          align="right"
          :round="3"
          :width="686"
          :height="300"
          :list="listimg"
        ></tm-carousel>
      </tm-sheet>
      <!-- 提取码 -->
      <tm-sheet :margin="[0]" class="setting">
        <tm-grid :width="710" :col="4">
          <tm-grid-item>
            <span class="iconfont icon-tihuoma code"></span>
            <tm-text label="提货码" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-tihuodianguanli code"></span>
            <tm-text label="提货点管理" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-miaosha-tixing code"></span>
            <tm-text label="秒杀提醒" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-ren code"></span>
            <tm-text label="成为团长" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-lianxikefu code"></span>
            <tm-text label="联系客服" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-ren code"></span>
            <tm-text label="成为团长" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-shanghuruzhu code"></span>
            <tm-text label="商户入驻" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-jiameng code"></span>
            <tm-text label="代理商加盟" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-tousujianyi code"></span>
            <tm-text label="投诉与建议" :fontSize="24"></tm-text>
          </tm-grid-item>
          <tm-grid-item>
            <span class="iconfont icon-shezhi code"></span>
            <tm-text label="设置" :fontSize="24"></tm-text>
          </tm-grid-item>
        </tm-grid>
      </tm-sheet>
    </tm-app>
  </div>
</template>

<script lang="ts" setup>
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmNavbar from '@/tmui/components/tm-navbar/tm-navbar.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmGrid from '@/tmui/components/tm-grid/tm-grid.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import tmGridItem from '@/tmui/components/tm-grid-item/tm-grid-item.vue'
import tmCarousel from '@/tmui/components/tm-carousel/tm-carousel.vue'
import { ref } from 'vue'

const redPacket = ref(0)

// 页面的跳转
const gotoOrderList = (index: number) => {
  console.log(index)
  uni.navigateTo({
    url: `/pagesOrder/pagesOrder`,
  })
}
//图片的列表
const listimg = [
  'https://img1.baidu.com/it/u=3877023792,871820643&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  'https://img1.baidu.com/it/u=4037443877,372978985&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=433',
  'https://img0.baidu.com/it/u=1162956740,4172486160&fm=253&fmt=auto&app=138&f=JPEG?w=585&h=304',
  'https://img2.baidu.com/it/u=2124580832,716372598&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=207',
]
</script>

<script lang="ts">
/**
 * @module  Page-My
 *
 * @description  我的.
 *
 * @vue-event   gotoOrderList  - 跳转订单列表
 *
 */
export default {
  // 用于setup
  name: 'OrderList',
}
</script>

<style lang="scss" scoped>
.my {
  position: relative;

  .nav {
    background-image: linear-gradient(to right, rgb(255, 180, 60), rgb(255, 100, 0));
  }

  .bgc-board {
    width: 100%;
    height: 400rpx;
    background-image: linear-gradient(to right, rgb(255, 180, 60), rgb(255, 100, 0));
    border-bottom-left-radius: 100rpx;
    border-bottom-right-radius: 100rpx;
  }

  .my-order {
    width: 710rpx;
    background-color: #fff;
    position: absolute;
    border-radius: 200rpx;
    top: 400rpx;
    left: 20rpx;

    .order {
      color: orange;
      font-size: 48rpx;
    }
  }

  .my-active {
    width: 710rpx;
    background-color: #fff;
    position: absolute;
    // border-radius: 200rpx;
    top: 700rpx;
    left: 20rpx;

    .active {
      font-size: 50rpx;
    }
  }

  .carousel {
    width: 750rpx;
    background-color: #fff;
    position: absolute;
    top: 820rpx;
    left: 15rpx;
  }

  .setting {
    position: absolute;
    top: 1300rpx;
    left: 15rpx;

    .code {
      font-size: 40rpx;
    }
  }
}
</style>
